<template>
  <ul class="mod-user-info">
     <mod-sensitive login>
      <li class="nav-item">
        <a href="#" @click.prevent="logout" title="登出">
          <i class="fa fa-sign-out fa-fw"></i>
        </a>
      </li>
    </mod-sensitive>
     <li class="nav-item">
      <com-text-switch :configs="langConfigs" v-model="lang"></com-text-switch>
    </li>
    <mod-sensitive :activities="['ROLE_SUPERUSER']">
      <li class="nav-item">
      <router-link to="/manage" title="系统管理">
        <i class="fa fa-wrench fa-fw"></i>
      </router-link>
      </li>
    </mod-sensitive>
    <mod-sensitive login>
      <li class="nav-item">
        <router-link to="/dashboard/todos" title="代办事项">
        <i class="fa fa-bell fa-fw"></i>
        <com-badge v-show="todos > 0" :num="todos"></com-badge>
        </router-link>
      </li>
    </mod-sensitive>
  </ul>
</template>
<script lang="ts">
import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
import ComBadge from '@/components/badge/ComBadge.vue'
import ModSensitive from '../ModSensitive.vue'
import ComTextSwitch from '../../components/form/ComTextSwitch.vue'
import { Locales } from '@/messages/locale'
import loginService from '@/services/login-service'

@Component({ name: 'mod-main-user-info', components: { ComBadge, ModSensitive, ComTextSwitch } })
export default class ModMainUserInfo extends Vue {
  @Prop({ type: Number, 'default': 0 })
  todos: number

  langConfigs = [{ code: 'zh', text: '中' }, { code: 'en', text: 'En' }]

  lang: string = 'zh'

  @Watch('lang')
  onLocaleChange (val, oval) {
    if (val !== oval) {
      this.$i18n.changeLocale(Locales.forName(val))
    }
  }

  logout () {
    loginService.logout()
      .then(() => {
        this.$router.push('/login?logout=true')
      })
  }
}
</script>
<style lang="less">
@import url('../../styles/variable.less');

.mod-user-info {
  list-style: none;
  margin: 0;
  padding-left: 0;

  .nav-item {
    padding-left: 16px;
    float: right;
  }

  .com-textswitch {
    font-size: 16px;
  }
}
</style>
